<template>
	<view class="container">
		<view class="tui-cells">
			<textarea v-model="comment" class="tui-textarea" name="desc" placeholder="宝贝满足您的期待吗？说说你的使用心得,分享给想买的他们吧" maxlength="500" placeholder-class="tui-phcolor-color" auto-focus />
			<view class="tui-textarea-counter">0/500</view>
		</view>
<!-- 		<view class="tui-enclosure">
			<tui-icon margin="0 40rpx 0 0"  name="satisfied" :size="25"></tui-icon>
			<tui-icon margin="0 40rpx 0 0" name="picture" :size="25"></tui-icon>
			<tui-icon name="link" :size="22"></tui-icon>
		</view> -->
		<view class="tui-rate-container">
			<view class="tui-title">商品评价</view>
			<tui-rate :current="rateValue" :hollow="true" @change="change"></tui-rate>
			<view class="rate-text">{{ rateText }}</view>
		</view>
		<!-- 图片上传 -->
		<view class="tui-enclosure tui-box-upload">
			<tui-upload :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
		</view>
		<view class="tui-cmt-btn">
			<tui-button type="danger" @click="handleSubmit" shape="circle">发表</tui-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		const serverUrl = `${this.$api.UploadFileUrl}`
		// console.log(serverUrl,"<<<<what")
		return {
			imageData: [],
			serverUrl,
			rateValue: 0,
			comment: '',
			productCode: '',
			productPic: '',	
			productItemId: '',
			orderId: '',
		};
	},
    onLoad({ productCode, productItemId, orderId }){
        if(!productCode || !productItemId || !orderId){
			uni.showModal({
			    title: `错误提示`,
			    content: "非法进入",
			    showCancel: false
			})
			return
		}
		this.productCode = productCode
		// this.productPic = productPic
		this.productItemId = productItemId
		this.orderId = orderId
    },
	methods: {
		result: function(e) {
			console.log(e, '@complete')
			this.imageData = e.imgArr;
		},
		remove: function(e) {
			//移除图片
			console.log(e, '@remove')
			let index = e.index
		},
		change: function(e) {
			this.rateValue = e.index
		},
		async handleSubmit(){
			// console.log(this.comment, this.imageData)
            let [ pic1, pic2, pic3 ] = this.imageData
            let { comment, rateValue, productCode, productItemId, orderId } = this.$data
			let customerId = this.$store.state.customerId
			let result = await this.$api.AddComment({
				comment,
				pic1,
				pic2,
                pic3,
				orderId,
                isGood: rateValue >= 3 ? '1' :'0',
                productId: productCode,
				productItemId: Number(productItemId),
				merchantId: this.$store.state.merchantId,
                customerId
			})
			
			uni.showToast({
				title:'感谢您的评论'
			})
			
			setTimeout(() => {
				uni.navigateTo({
					url:'/pagesB/commentOrder/commentOrder'
				})
			}, 1000)
		}
	},
    computed:{
		rateText(){
            return ['','非常差','差','一般','好','非常好'][this.rateValue]
        }
	},
};
</script>

<style lang="scss">
page {
	background: #fff;
	color: #333;
}
.container {
	padding: 30rpx;
	box-sizing: border-box;
}

.tui-cells {
	border-radius: 4rpx;
	height: 280rpx;
	box-sizing: border-box;
	padding: 20rpx 20rpx 0 20rpx;
	position: relative;
}

.tui-cells::after {
	content: '';
	position: absolute;
	height: 200%;
	width: 200%;
	border: 1px solid #e6e6e6;
	transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	left: 0;
	top: 0;
	border-radius: 8rpx;
	pointer-events: none;
}

.tui-textarea {
	height: 210rpx;
	width: 100%;
	color: #666;
	font-size: 28rpx;
}

.tui-phcolor-color {
	color: #ccc !important;
}

.tui-textarea-counter {
	font-size: 24rpx;
	color: #999;
	text-align: right;
	height: 40rpx;
	line-height: 40rpx;
	padding-top: 4rpx;
}
.tui-enclosure {
	display: flex;
	align-items: center;
	padding: 26rpx 10rpx;
	box-sizing: border-box;
}

.tui-cmt-btn {
	margin-top: 60rpx;
}

.tui-rate-container {
	padding: 40rpx 0 0;
	padding-left: 0;
	box-sizing: border-box;
	margin-bottom: 30rpx;
	background: #fff;
	font-size: 30rpx;
	display: flex;
	align-items: center;
	// justify-content: space-between;
}

.tui-title {
	font-size: 30rpx;
	margin-right: 30upx;
}

.rate-text{
	color: #999;
	margin-left: 30upx;
	font-size: 30rpx;
}
</style>
